<template>
  <div>
    <div class="crumbs-box">
      <crumbs :oneNav='navName' :rightFlag='true'></crumbs>
    </div>
    <div class="Detailid w1200 flex">  
      <div class="Detailid-left">
        <div class="Detailid-top">
          <div class="Detailid-time">
            {{createTime}}
          </div>
          <div class="Detailid-title">
            {{centent.title}}
          </div>
          <div class="Detailid-centent">
            <span class="author">作者:{{centent.author}}</span>
            <span class="source">来源:{{centent.source}}</span>
            <span class="Reading">阅读次数:{{centent.readNum}}</span>
          </div>
          <hr>
          <div class="centent" v-html="centent.context">
          </div>
          <div class="fy flex">
            <a :class="this.bcg ==0?'color':''" @click="Updown(centent.beforeArticleId)">上一条：{{centent.beforeArticleName}}</a>
            <a :class="this.bcg ==1?'color':''" @click="Updown(centent.afterArticleId)">下一条：{{centent.afterArticleName}}</a>
          </div>
        </div>
      </div>
      <div class="Detailid-right">
        <news @getId='getIddd'></news>
      </div>
    </div>
  </div>
</template>

<script>
  import API from '../../api/content'
  import news from '../common/new'
  import crumbs from '../common/crumbs'
  export default {
    components:{news,crumbs},
    data() {
      return {
        articleId:'',
        bcg:1,
        centent:'',
        attachmentList:[],
        createTime:'',
        navName:''
      }
    },
    created() {
      this.articleId = this.$route.query.articleId
      this.navName = this.$route.query.navName
      this.details(this.articleId)
    },
    methods:{
      details(articleId) {
        API.ArticleDetail({articleId:articleId}).then(res =>{
          if(res.code == 0) {
            this.centent = res.data
            this.attachmentList = res.data.attachmentList
            this.createTime = this.centent.createTime.split(" ")[0].toString()
            this.$store.commit('setDetails',this.attachmentList)
          }
        })
      },
      getIddd(item){
        if(item.articleAttachmentType == 1 && item.newsUrl != '') {
          window.open(item.newsUrl, '_blank');
          // window.open(location.pathname + '#' + '/Detailid?'+'articleId='+item.articelId+'&navName=项目申报')
        }else if(item.articleAttachmentType == 0) {
          window.open(item.newsUrl, '_blank');
        }
        
        
      },
      Updown(articleId) {
        if(articleId == '') {

        }else {
          this.details(articleId)
        }
      }
    }
  }
</script>

<style lang="scss">
.Detailid {
  margin-top: 60px;
  .Detailid-left {
    .Detailid-top {
      width: 865px;
      .Detailid-time{
        font-size: 33px;
        color:#3246c4;
      }
      .Detailid-title {
        margin-top: 20px;
        text-indent: 2em;
        font-size: 16px;
        font-weight: 600;
        color: #555555;
      }
      .Detailid-centent {
        margin-top: 20px;
        font-style: 12px;
        color: #c6c6c6;
        .source,.Reading{
          margin-left: 40px;
        }
      }
      .centent {
        margin-top: 30px;
      }
      .fy {
        margin-top: 70px;
        margin-bottom: 70px;
        a {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 430px;
          height: 48px;
          line-height: 48px;
          border: 1px solid #333333;
          text-align: center;
          color: #8e8e8e;
          cursor: pointer;
          font-size: 13px;
        }
        .color {
          background-color: #3246c4;
          color: #ffffff;
        }
      }
    }
  }
  .Detailid-right {
    margin-left: 47px;
  }
  
}
</style>